<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>vue组件5--自定义组件的v-model</title>
    <link rel="stylesheet" href="index.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <p>r：{{r}}</p>
        red:  <slider :value="r" @input="changeR"></slider>
        <!--<slider v-model="r"></slider>-->
    </div>
    <script>
        Vue.component('slider', {
            props:['value'],
            template: `<div class="slider"> 
                            <div class="bar">
                                <div class="dot" :style="'left:' + (value*580-20) + 'px'" @mousedown="startMove" @mouseup="stopMove" @mouseleave="stopMove"></div>
                            </div>
                        </div>`,
            methods:{
                startMove:function(event){
                    // console.log('开始滑动了');
                    // 鼠标按下时监听鼠标滑动事件
                    event.target.onmousemove = function(e){
                        // console.log('正在滑动');
                        // console.log(e);
                        // event.clientX:是距离浏览器可视区域左边界的值;
                        // e.target.parentElement.offsetLeft:父标签距离浏览器可视区域左边界的值;
                        // 圆点距离父标签左边界的距离;
                        var distance = e.clientX - e.target.parentElement.offsetLeft - 20 ;
                        // 边界判断
                        distance = distance < -20 ? -20 : (distance > 560 ? 560 : distance);
                        console.log(distance);
                        e.target.style.left = distance + 'px';

                        // 修改this的指向;bind()方法
                        console.log(this);
                        //把数据传递到父组件 
                        this.$emit('input',(distance+20)/580);
                    }.bind(this);
                },
                stopMove:function(event){
                    // console.log('结束滑动了');
                    // 鼠标松开时取消监听滑动事件
                    event.target.onmousemove = null;
                }
            }
        })
        new Vue({
            el: '#app',
            data: {
                r:0.5
            },
            methods:{
                changeR:function(r){
                    this.r =  r ;
                }
            }
        })
    </script>
</body>
</html>






